<template>
  <div class="model">
    <div class="item" v-if="orderInfo.orderAmountInfo">
      <div class="label">
        在线支付
        <div class="price">{{ orderInfo.orderAmountInfo.finalAmount }}</div>
      </div>
      <!-- <div class="right active">
        查看
        <span class="i-carbon-chevron-right icon"></span>
      </div> -->
    </div>
    <div class="item" v-if="layoutInfo.id">
      <div class="label">
        取消规则
        <div class="tip">{{ layoutInfo.cancelRule }}</div>
      </div>
      <!-- <div class="right active">
        查看
        <span class="i-carbon-chevron-right icon"></span>
      </div> -->
    </div>
  </div>

  <div class="model hotel-info" v-if="layoutInfo.id">
    <div class="room-item" @click="to('/pages-sub/hotel/detail/index', { id: layoutInfo.id })">
      <div class="img">
        <image :src="layoutInfo.imgUrls[0]" mode="aspectFill" />
      </div>
      <div class="room-info">
        <div class="name">{{ orderInfo.hotelName }}</div>
        <div class="spec">
          {{ layoutInfo.hotelAddr }}
          <span class="i-carbon-copy icon active" @click="copyText()"></span>
        </div>
      </div>
    </div>
    <div class="btns">
      <div class="btn" @click="call(layoutInfo.phone)">
        <image class="img" src="/static/images/icon/call.png" />
        联系酒店
      </div>
      <!-- <div class="btn">
        <image class="img" src="/static/images/icon/car.png" />
        打车
      </div> -->
      <div class="btn" @click="toLocation()">
        <image class="img" src="/static/images/icon/location.png" />
        地图/交通
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { to } from '@/utils/page'
import { openLocation, msgSuccess } from '@/utils/index'

defineOptions({
  name: 'HotelInfo',
})

const props = defineProps(['orderInfo', 'layoutInfo'])

function copyText() {
  uni.setClipboardData({
    data: props.layoutInfo.hotelAddr,
    success() {
      msgSuccess('复制成功')
    },
  })
}

function toLocation() {
  openLocation({
    latitude: +props.layoutInfo.hotelLat,
    longitude: +props.layoutInfo.hotelLng,
    name: props.layoutInfo.hotelName,
    address: props.layoutInfo.hotelAddr,
  })
}

function call(phone) {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone,
    })
  }
}
</script>
<style lang="scss" scoped>
.model {
  padding: 0 30rpx;
  .item {
    display: flex;
    align-items: center;
    height: 100rpx;
    @include border-bottom(var(--bgc2));
    &:last-child {
      @include border-bottom(transparent);
    }
    .label {
      display: flex;
      flex: 1;
      align-items: center;
      font-size: 27rpx;
      font-weight: 700;
      color: var(--color1);
      .price {
        margin-left: 20rpx;
        font-size: 38rpx;
        font-weight: 700;
        color: var(--sc2);
        &::before {
          font-size: 23rpx;
          content: '￥';
        }
      }
    }
    .right,
    .tip {
      display: flex;
      align-items: center;
      margin-left: 20rpx;
      font-size: 23rpx;
      font-weight: 500;
      color: var(--color4);
    }
  }

  &.hotel-info {
    padding: 30rpx;
    .room-item {
      display: flex;
      .img {
        width: 130rpx;
        height: 173rpx;
        overflow: hidden;
        border-radius: 18rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 18rpx;
        }
      }
      .room-info {
        flex: 1;
        width: 0;
        margin-left: 20rpx;
        .name {
          font-size: 27rpx;
          font-weight: 700;
          line-height: 32rpx;
          color: var(--color1);
          @include text-clamp(2);
        }
        .spec {
          margin-top: 20rpx;
          font-size: 25rpx;
          line-height: 38rpx;
          color: var(--color4);
          .icon {
            font-size: 22rpx;
          }
        }
      }
    }

    .btns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20rpx;
      margin-top: 20rpx;
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 65rpx;
        font-size: 23rpx;
        color: var(--color1);
        border: 1px solid #dcdee0;
        border-radius: 33rpx;
        .img {
          width: 30rpx;
          height: 30rpx;
          margin-right: 8rpx;
        }
        &:active {
          background-color: #dcdee0;
        }
      }
    }
  }
}
</style>
